<template>
	<lilo-form-table 
		ref="formTable"
		:query-info="queryInfo"
		:form-data="formData" 
		:table-data="tableData">
	</lilo-form-table>
</template>

<script>
	import { QIAOKOU } from '@/utils/dictionary.js';
	import {
		queryPageList,
		qianshou,
		tuihui
	} from '@/api/professional/qiaokou/qianshou';
	import variables from '@/styles/variables.scss';
	
	export default {
		computed: {
			variables() {
				return variables;
			}
		},
		data() {
			return {
				queryInfo: {
					entity: queryPageList,
					// param: {
					// 	pageNo: 1,
					// 	pageSize: 15
					// },
					// responseField: {
					// 	data: 'rows',
					// 	total: 'totalrows'
					// }
				},
				formData: {
					dataProvider: {
						XM: '',
						ZJHM: '',
						XXDZ_XX: '',
						STATUS: 0
					},
					rules: {
						ZJHM: [{
							pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
							message: '证件号码格式有误！'
						}]
					},
					templates: [
						{
							layout: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24 },
							component: {
								name: 'Divider',
								label: '条件搜索'
							}
						},
						{
							layout: { xs: 24, sm: 24, md: 4, lg: 4, xl: 4 },
							field: 'XM',
							component: {
								name: 'Input',
								placeholder: '请输入姓名',
								clearable: true
							}
						},
						{
							layout: { xs: 24, sm: 24, md: 4, lg: 4, xl: 4 },
							field: 'ZJHM',
							component: {
								name: 'Input',
								placeholder: '请输入身份证号',
								clearable: true
							}
						},
						{
							layout: { xs: 24, sm: 24, md: 6, lg: 6, xl: 6 },
							field: 'XXDZ_XX',
							component: {
								name: 'Input',
								placeholder: '请输入详细地址',
								clearable: true
							}
						},
						{
							layout: { xs: 24, sm: 24, md: 2, lg: 2, xl: 2 },
							field: 'STATUS',
							component: {
								name: 'Select',
								placeholder: '请选择状态',
								clearable: false,
								// optionKey: 'value',
								// optionLabel: 'label',
								options: QIAOKOU.QIANSHOU,
								change: this.selectChange
							}
						}, {
							layout: { xs: 24, sm: 24, md: 8, lg: 8, xl: 8 },
							component: {
								name: 'Template',
								templates: [
									{
										name: 'Button',
										label: '查询',
										type: 'primary',
										icon: 'el-icon-search',
										click: this.query
									},
									{
										name: 'Button',
										label: '重置',
										icon: 'el-icon-refresh-right',
										click: this.reset
									}
								]
							}
						}
					]
				},
				tableData: {
					autoHeight: true, //是否自动计算table高度，默认为true
					deltaHeight: 145, //table的高度微调，配合自动计算高度使用，默认值为145
					dataProvider: {
						tablelist: []
					},
					templates: [{
							layout: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24 },
							field: 'divider001',
							component: {
								name: 'Divider',
								label: '人员列表',
								info: '服务端分页的批量勾选列表（客户端缓存）',
								templates: [
									{
										name: 'Button',
										label: '签收',
										type: 'primary',
										icon: 'el-icon-check',
										round: false,
										disabled: false,
										click: this.templateDividerQianshouAll
									}
								]
							}
						}, {
						layout: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24 },
						field: 'tablelist', //必填项，必须是tablelist
						// label: '核酸检测机构名称',
						labelWidth: '0px',
						component: {
							name: 'Table',
							// height: 200, //如果手动设置table高度需要autoHeight=false
							checked: true,
							checkedKey: 'id',
							checkedDisabled: false,
							checkedMultiple: true, //多选还是单选，true多选，false单选，默认多选
							checkedChange: this.checkedChange,
							columns: [
								{
									field: 'xm',
									label: '姓名',
									width: 80,
									styleFormatter: row => {
										if(row.xb === '男') { 
											return { color: variables.lightBlue };
										} else {
											return { color: variables.red };
										}
									}
								},
								{
									field: 'xb',
									label: '性别',
									width: 80,
									styleFormatter: row => {
										if(row.xb === '男') { 
											return { color: variables.lightBlue };
										} else {
											return { color: variables.red };
										}
									}
								},
								{
									field: 'zjhm',
									label: '身份证号',
									width: 180
								},
								{
									field: 'csny',
									label: '出生年月',
									width: 150,
									formatter: (dp, row, col) => {
										const val = row[col.field];
										if(val) {
											return val.split(' ')[0];
										}
										return '';
									}
								},
								{
									field: 'xxdz_xx',
									label: '详细地址'
								},
								{
									field: 'lxfs',
									label: '联系方式',
									width: 150
								},
								{
									field: 'xxdz_jie',
									label: '所属街道',
									width: 150
								},
								{
									field: 'sq',
									label: '所属社区',
									width: 150
								},
								{
									label: '操作',
									width: 100,
									// fixed: 'right',
									templates: [
										{
											name: 'Button',
											label: '退回',
											type: 'danger',
											// icon: 'el-icon-search',
											click: this.tuihuiHandler,
											validator: row => {
												return row.status === 0;
											}
										},
										{
											validator: row => {
												return row.status !== 0;
											},
											textFormatter: row => {
												const data = QIAOKOU.QIANSHOU;
												const code = row.status;
												console.log(code)
												for (let i = 0; i < data.length; i++) {
													if (data[i].value == code) {
														return data[i].label;
													}
												}
												return code;
											},
											styleFormatter: row => {
												//0：待签收、1：已签收、-1：退回
												const code = row.status;
												if(code === 0) { 
													return {color: variables.lightBlue, fontWeight: 'bold'};
												} else if (code === 1) {
													return {color: variables.deepGreen, fontWeight: 'bold'};
												} else if (code === -1) {
													return {color: variables.red, fontWeight: 'bold'};
												} else {
													return {color: variables.grey, fontWeight: 'bold'};
												}
											}
										}
									]
								}
							]
						}
					}]
				}
			}
		},
		methods: {
			selectChange(val) {
				const tablelistTemp = this.$refs.formTable.getTable().getTemplate('tablelist');
				const divider001Temp = this.$refs.formTable.getTable().getTemplate('divider001');
				if(val === 0) {
					// tablelistTemp.component.checked = true; //有一丝BUG，有待解决
					tablelistTemp.component.checkedDisabled = false;
					divider001Temp.component.templates[0].disabled = false;
				} else {
					// tablelistTemp.component.checked = false; //有一丝BUG，有待解决
					tablelistTemp.component.checkedDisabled = true;
					divider001Temp.component.templates[0].disabled = true;
				}
			},
			checkedChange(row, key) {
				//多选为数组rows, 数组keys
				//单选为对象row, 字符串key
			},
			templateDividerQianshouAll(item, template) {
				// console.log(item);
				// console.log(template);
				const selectedRows = this.$refs.formTable.getTable().getSelectedRows();
				const selectedKeys = this.$refs.formTable.getTable().getSelectedKeys();
				console.log(selectedRows);
				console.log(selectedKeys);
			},
			query() {
				this.$refs.formTable.query();
			},
			reset() {
				this.$refs.formTable.reset();
			},
			qianshouHandler(row) {
				console.log(row);
			},
			tuihuiHandler(row) {
				console.log(row);
			}
		}
	}
</script>

<style>
</style>
